<template>
  <div class="left_body" id="glass" ref="glass">
    <div v-if="tu1">
      <div class="img_box">
        <div
          class="mid_box"
          ref="midBox"
          @mouseenter="isShow = true"
          @mouseleave="isShow = false"
          @mousemove="zoom"
        >
          <img :src="mainIMG || tu1[0]" alt="" />
          <div
            ref="kuai"
            class="kuai"
            v-show="isShow"
            :style="`left:${mid_style.left}px;top:${mid_style.top}px`"
          ></div>
        </div>
        <div class="box2">
          <img
            src="http://1.117.75.96:8080/goods/UI/left-arrow-small.png"
            alt=""
            class="btn1"
            @click="mini_btn_prev"
          />
          <img
            src="http://1.117.75.96:8080/goods/UI/right-arrow-small.png"
            alt=""
            class="btn2"
            @click="mini_btn_next"
          />
          <div class="mini_box_warp">
            <ul class="mini_box"  :style="{transform:`translateX(${-mini_index*75}px)`}">
              <li v-for="(item, index) in tu1">
                <img
                  :src="item"
                  alt=""
                  :class="index == cli_mini ? 'cli' : ''"
                  @click="
                    mainIMG = item;
                    cli_mini = index;
                  "
                />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="big_box" v-show="isShow" style="z-index: 10">
        <img
          :src="mainIMG || tu1[0]"
          alt=""
          class="big_tu"
          :style="`left:${big_style.left}px;top:${big_style.top}px`"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, nextTick } from "vue-demi";

let props = defineProps(["wares", "tu1"]);

//放大镜显示隐藏
let mainIMG = ref(null);
let isShow = ref(false);

//小图片移动
let cli_mini = ref(0);
let mini_index = ref(0);
function mini_btn_prev() {
  if (mini_index.value >= 1) {
    mini_index.value--;
  }
}
function mini_btn_next() {
  console.log(props.tu1.length);
  if (mini_index.value + 1 <= props.tu1.length - 5) {
    mini_index.value++;
  }
}

//放大镜移动
let mid_style = ref({ left: 0, top: 0 });
let big_style = ref({ left: 0, top: 0 });
let scale = ref(2.4);
let kuai =document.querySelector('.kuai'); //放大镜透明方块
let glass = document.querySelector('#glass');
function zoom(e) {
  let left = glass.offsetLeft;
  let top = glass.offsetTop;
  let dx = e.pageX - left - kuai.offsetWidth / 2;
  let dy = e.pageY - top - kuai.offsetWidth / 2;
  if (dx <= 0) dx = 0;
  if (dy <= 0) dy = 0;
  if (dx >= 200) dx = 200;
  if (dy >= 200) dy = 200;
  mid_style.value.left = dx;
  mid_style.value.top = dy;
  // console.log(dx, dy)
  big_style.value.left = -dx * scale.value;
  big_style.value.top = -dy * scale.value;

}
function bindStyle(obj) {
  return `left:${obj.left};top:${obj.top}`;
}
</script>

<style lang="less" scoped>
.left_body {
  padding-top: 0px;
  display: inline-block;
  margin-right: 50px;
  position: relative;
  width: 452px;
  height: 534px;

  .img_box {
    position: relative;

    .mid_box {
      width: 450px;
      height: 450px;
      position: relative;
      border: 1px solid red;
      border-radius: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }

      .kuai {
        position: absolute;
        top: 0;
        left: 0;
        width: 250px;
        height: 250px;
        background-color: #555;
        opacity: 0.6;
      }
    }

    .box2 {
      margin-top: 20px;
      position: relative;

      .btn1 {
        left: 0px;
        top: 18px;
        width: 28px;
        height: 28px;
        cursor: pointer;
        position: absolute;
      }

      .btn2 {
        right: 0px;
        top: 18px;
        width: 28px;
        height: 28px;
        cursor: pointer;
        position: absolute;
      }

      .mini_box_warp {
        width: 365px;
        height: 62px;
        overflow: hidden;
        margin: auto;
        position: relative;

        .mini_box {
          position: absolute;
          display: flex;
          flex-wrap: nowrap;
          transition: all 0.2s;

          li {
            display: inline-block;
            cursor: pointer;

            img {
              display: inline-block;
              margin-right: 13px;
              width: 60px;
              height: 60px;
              border: 1px solid transparent;
            }
          }

          .cli {
            border: 1px solid #1e7cff;
          }
        }
      }
    }
  }

  .big_box {
    width: 600px;
    height: 600px;
    overflow: hidden;
    position: absolute;
    left: 452px;
    top: -20px;

    img {
      width: 1080px;
      height: 1080px;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
</style>
